<%--
  Created by IntelliJ IDEA.
  User: xiaoyuyu
  Date: 2019/7/2
  Time: 16:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>
        X-admin v1.0
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/x-admin.css" media="all">
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
      <a><cite>首页</cite></a>
      <a><cite>结账</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <form class="layui-form x-center" action="" style="width:50%">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <%--<label class="layui-form-label" style="width:60px">所属分类</label>
                <div class="layui-input-inline" style="width:120px;text-align: left">
                    <select name="father_code" id="father_c">
                        <option value="0">顶级分类</option>
                    </select>
                </div>--%>
                <%--<div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn"  lay-submit="" lay-filter="classify_sreach"><i class="layui-icon">&#xe615;</i></button>
                </div>--%>
                <div class="layui-input-inline" >
                    <input type="text" name="bar_code"  placeholder="输入条码或者扫码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn"  lay-submit="" lay-filter="add"><i class="layui-icon">&#xe608;</i></button>
                </div>
            </div>
        </div>
    </form>
    <xblock><button class="layui-btn" onclick="complete_collect()"><i class="layui-icon"></i>结账</button><span class="x-right" id="total-count" style="line-height:40px">共有数据：88 条</span></xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                序号
            </th>
            <th>
                商品条码
            </th>
            <th>
                商品名称
            </th>
            <th>
                单价
            </th>
            <th>
                单位
            </th>
            <th>
                数量
            </th>
        </tr>
        </thead>
        <tbody id="x-link">
        </tbody>
    </table>

    <div id="page"></div>
</div>
<script src="../../lib/layui/layui.js" charset="utf-8">
</script>
<script src="../../js/x-layui.js" charset="utf-8">
</script>
<script src="../../js/jquery.min.js" charset="utf-8"></script>
<script>
    //订单项的总数
    var order_item_amount = 0;
    $("#total-count").replaceWith("<span class=\"x-right\" id=\"total-count\" style=\"line-height:40px\">共有数据："+ order_item_amount +" 条</span>");


    layui.use(['form'], function(){
        $ = layui.jquery;//jquery
        form = layui.form();

        form.on('submit(add)', function(data){
            //通过输入的条码查找到商品信息
            //条码
            var bar_code = data.field.bar_code;
            console.log(bar_code);
            $.ajax({
                type:"POST",
                url:"${pageContext.request.contextPath}/findProductByBarCode",
                data:{"code":bar_code},
                success:function (data) {
                    if(data.state_code){
                        //跳出条件
                        var flag = false;

                        // console.log(data);
                        var obj = data.product;
                        //通过信息生成订单项信息
                        //添加之前判断是否列表已经存在同一种商品了，存在就只加个数量
                        var list = $('#x-link tr');
                        // var list = $('#x-link tr td:nth-child(2)');
                        list.each(function () {
                            // console.log($(this).text());
                            //已经存在的商品条形码
                            var code = $(this).find("td:nth-child(2)").text().trim();
                            // console.log(code);
                            if (code == bar_code){
                                //增加1
                                var value = $(this).find("input").val();
                                $(this).find("input").val(parseInt(value) + 1);
                                flag = true;
                                // console.log(value);
                            }
                            // console.log(code);
                        });

                        //判断此次是否不增加列表
                        if(flag){
                            return;
                        }
                        //添加列表
                        order_item_amount += 1;
                        //更新总条数
                        //填充总数据
                        $("#total-count").replaceWith("<span class=\"x-right\" id=\"total-count\" style=\"line-height:40px\">共有数据："+ order_item_amount +" 条</span>");

                        $('#x-link').append("<tr>\n" +
                            "            <td>\n" +
                            "                "+ order_item_amount +"\n" +
                            "            </td>\n" +
                            "            <td>\n" +
                            "                "+ obj.bar_code +"\n" +
                            "            </td>\n" +
                            "            <td >\n" +
                            "                "+ obj.name +"\n" +
                            "            </td>\n" +
                            "            <td >\n" +
                            "                "+ obj.price +"\n" +
                            "            </td>\n" +
                            "            <td >\n" +
                            "                "+ obj.unit +"\n" +
                            "            </td>\n" +
                            "            <td >\n" +
                            "                <input type=\"number\" name=\"amount\" value=\"1\" amount=\""+ obj.amount +"\" p_id=\""+ obj.id +"\"  placeholder=\"输入数量\" autocomplete=\"off\" class=\"layui-input\">\n" +
                            "            </td>\n" +
                            "\n" +
                            "        </tr>");
                    }else{
                        layer.msg("条码无效", {icon: 5,time : 1000});
                    }

                }
            });
            return false;
        });
    });

    
    //结账，根据列表中的订单项生成订单信息
    function complete_collect() {
        //生成订单，并且返回订单号
        $.ajax({
            type:"POST",
            url:"${pageContext.request.contextPath}/addOrderAndReturnOrder",
            async:false,
            success:function (data) {
                // console.log(data);
                if(data.state_code){
                    //中断标志
                    var flag = false;
                    //报错消息
                    var msg = "";
                    //通过订单号将订单项关联订单
                    var order_id = data.order.id;
                    console.log(data);
                    var list = $('#x-link tr');
                    //如果列表为空也报错
                    if(list.length == 0){
                        flag = true;
                        msg = "无商品";
                    }
                    //检查是否数量有负数或者0
                    list.each(function () {
                        var amount = $(this).find("input").val();
                        if(amount <= 0){
                            flag = true;
                            msg = "数量应该大于0";
                        }
                    });
                    if(flag){
                        layer.msg(msg, {icon: 5});
                        return;
                    }

                    list.each(function () {
                        var product_id = $(this).find("input").attr("p_id");
                        console.log("product_id:"+product_id);
                        var amount = $(this).find("input").val();
                        console.log("amount:"+amount);
                        var price = parseFloat($(this).find("td:nth-child(4)").text());
                        console.log("price:"+price);
                        var bar_code = $(this).find("td:nth-child(2)").text().trim();
                        console.log("bar_code:"+bar_code);
                        var product_name = $(this).find("td:nth-child(3)").text().trim();
                        console.log("product_name:"+product_name);
                        var product_unit = $(this).find("td:nth-child(5)").text().trim();
                        console.log("product_unit:"+product_unit);
                        $.ajax({
                            type:"POST",
                            url:"${pageContext.request.contextPath}/addOrderItem",
                            async:false,
                            data:{"order_id":order_id,"product_id":product_id,"amount":amount,"price":price,"bar_code":bar_code,
                            "product_name":product_name,"product_unit":product_unit},
                            success:function (data) {
                                console.log(data);

                            }
                        });
                    });
                    collect_money('收银信息','${pageContext.request.contextPath}/toBill','600','500')
                }else{

                }

            }
        });


    }




    // 显示订单详细信息
    function collect_money (title,url,id,w,h) {
        x_admin_show(title,url,w,h);
    }




</script>

</body>
</html>
